/* eslint-disable react/jsx-pascal-case */
import React from 'react'

// 创建上下文 默认值为空
const Context = React.createContext(null)

const Son = () => {
	// 子组件 接受到上下文的值 传入的是对象 那么接收一个对象
	const { count, setCount } = React.useContext(Context)

	const add = () => {
		setCount(count + 1)
	}
	return (
		<>
			{/* 这里使用了组件 */}
			<React.$vant.Button onClick={add}>
				自增 | {count}
			</React.$vant.Button>
		</>
	)
}

const UseContext = () => {
	// 将值给到state里面使用
	const [count, setCount] = React.useState(0)

	return (
		<>
			<div className="nav2">
				<h4>7.上下文的使用 useContext , createContext</h4>
				<Context.Provider value={{ count, setCount }}>
					{/* 这里的{count是state里面的count} */}
					<Son />
				</Context.Provider>
			</div>
		</>
	)
}

export default UseContext
